<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>notebook</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">
    <!-- <link rel="stylesheet" href="../public/summernote/dist/summernote-bs4.css"> -->

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>


    <link rel="stylesheet" href="../public/jstree/dist/themes/default/style.min.css">

    <script src="../public/jstree/dist/jstree.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <div class="container" style="margin:20px auto;" id="noteBookApp">

        <div class="row">
            <div class="col-sm-3 sidebar">
                <div id="jstree">
                    tree
                </div>
            </div>

            <div class="col-sm-9 main">


                <div class="panel panel-info">

                    <div class="panel-body">
                        <form class="navbar-form navbar-right">

                            <div class="form-group">
                                <label for="firstname" class="control-label">目录</label>
                                <div class="input-group">
                                    <input type="text" v-model="articleSearchForm.cateName" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstname" class="control-label">名称</label>
                                <div class="input-group">
                                    <input type="text" v-model="articleSearchForm.sname" class="form-control">
                                </div>
                            </div>
                            <button type="button" @click="queryArticle" class="btn btn-primary">搜索</button>
                        </form>
                    </div>
                </div>


                <button type="button" @click="fnShowAddModel" class="btn btn-success">add</button>

                <div class=" pull-right">

                    <ul class="pagination">

                        <button type="button" @click="fnLastPage" class="btn btn-link"><i class="glyphicon glyphicon-chevron-left"></i></button>

                        <input type="number" style="width: 50px;" v-model="page" @change="queryArticle" min="1" :max="pages">
                        / {{pages}}

                        <!-- <li v-for="n in pages">
                            <button type="button" @click="fnPageChange(n)" class="btn btn-link">{{n}}</button>
                        </li> -->
                        <button type="button" @click="fnNextPage" class="btn btn-link"><i class="glyphicon glyphicon-chevron-right"></i></button>
                    </ul>

                </div>

                <table class="table table-condensed table-bordered">
                    <thead>
                        <tr>
                            <th>sname</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in articleList" :key="index">
                            <td>

                                <button type="button" @click="fnShowDetail(item)" class="btn btn-link">{{item.sname}}</button>

                            </td>

                            <td>{{item.ctime}}</td>
                            <td>

                                <!-- <button type="button" @click="fnUpdate(item)" class="btn btn-primary">modify</button> -->
                                <!-- <button type="button" @click="fnDeleteModal(item)" class="btn btn-danger">delete</button> -->

                            </td>
                        </tr>
                    </tbody>
                </table>


            </div>





        </div>

        <!-- add  article  -->

        <!-- 模态框（Modal） -->
        <div class="modal fade  bs-example-modal-lg" id="addArticleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">提示</h4>
                    </div>
                    <div class="modal-body">


                        <form class="navbar-form pull-right">
                            <button type="button" @click="fnAddArticle" class="btn btn-link">保存</button>
                        </form>


                        <div class="clearfix">

                        </div>
                        <form role="form">
                            <div class="form-group" v-show="false">
                                <label>cateId</label>
                                <input type="text" v-model="articleForm.cateId" class="form-control">

                            </div>
                            <div class="form-group">
                                <label>所属目录</label>
                                <input type="text" readonly v-model="articleForm.cateName" class="form-control">

                            </div>
                            <div class="form-group" v-show="false">
                                <label>_id</label>
                                <input type="text" name="" id="input" class="form-control" v-model="articleForm._id">
                            </div>
                            <div class="form-group">
                                <label>名字</label>
                                <input type="text" name="" id="input" class="form-control" v-model="articleForm.sname">
                            </div>
                            <div class="form-group">
                                <label>正文</label>
                                <textarea id="summernote1" v-model="articleForm.stext" class="form-control" rows="10"></textarea>

                            </div>

                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" @click="fnAddArticle" class="btn btn-primary">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


    </div>

</body>

</html>

<script>
    var vm = new Vue({
        el: '#noteBookApp',
        data: {
            noteBookForm: {},
            articleList: [],
            articleSearchForm: {
                cateId: '',
                cateName: '',
            },
            cateSelect:{},
            articleForm: {
                cateId: '',
                cateName: '',
            },
            total: 0,
            page: 1,
        },
        computed: {

            pages() {
                return Math.ceil(this.total / 10);
            }
        },
        methods: {


            fnShowAddModel() {

                var node = $('#jstree').jstree(true).get_selected(true)[0];
                if(!node){
                    alert('请选择所在的目录');
                    return false;
                }
                this.articleForm.cateId = node.id;
                this.articleForm.cateName = node.text;

                // Vue.set(this.articleForm, 'cateName', node.text);
                $('#addArticleModal').modal('show');
            },

            fnShowDetail(item){

                window.open('walleArticleDetail.html?_id=' + item._id);
            },

            fnAddArticle() {
                var _self = this;

                var markupStr = $('#summernote1').summernote('code');
                var postData = _self.articleForm;
                postData.stext = markupStr;

                var postUrl = '../walleArticles/add';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: postData,
                    dataType: "json",
                    success: function (response) {

                        if (response.code == 0) {

                            $('#addArticleModal').modal('hide');
                            $("#summernote1").summernote('code', '');
                            _self.queryArticle();
                            _self.articleForm = {
                                cateId: '',
                                cateName: '',
                            };
                        }

                    }
                });

            },

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },

            fnAddCate(cate) {

                cate = cate || this.noteBookForm;
                var _self = this;

                var postUrl = '../walleCates/add';
                // if (cate.id) {
                //     postUrl = '../walleCate/update'
                // }
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: cate,
                    dataType: "json",
                    success: function (response) {

                        // if (response.code == 0) {

                        //     // _self.sysConfig = response.dat;
                        //     // _self.queryCate();
                        // }

                    }
                });

            },

            fnUpdateCate(cate) {

                cate = cate || this.noteBookForm;
                var _self = this;

                var postUrl = '../walleCates/update';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: cate,
                    dataType: "json",
                    success: function (response) {

                        // if (response.code == 0) {

                        //     // _self.sysConfig = response.dat;
                        //     // _self.queryCate();
                        // }

                    }
                });

            },
            fnDeleteCate(cate) {

                console.log('delete', cate);
                cate = cate || this.noteBookForm;
                var _self = this;

                var postUrl = '../walleCates/delete';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: { id: cate.id },
                    dataType: "json",
                    success: function (response) {

                        // if (response.code == 0) {

                        //     // _self.sysConfig = response.dat;
                        //     // _self.queryCate();
                        // }

                    }
                });

            },


            queryCate: function () {

                var _self = this;

                // var _id = this.getQueryString("_id");
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../walleCates/",
                    // data: {
                    //     _id: _id
                    // },
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.jsTreeInit(response.dat);
                            // _self.noteBookForm = response.dat;
                            // $('#summernote1').summernote('code', _self.noteBookForm.stext);
                        }

                    }
                });
            },



            fnLastPage() {

                if (this.page > this.pages) {

                    var n = this.pages;
                    this.fnPageChange(n);
                }
                if (this.page > 1) {

                    var n = this.page - 1;
                    this.fnPageChange(n);
                }
            },

            fnNextPage() {

                if (this.page > this.pages) {

                    var n = this.pages;
                    this.fnPageChange(n);
                }
                if (this.page < this.pages) {

                    var n = this.page + 1;
                    this.fnPageChange(n);
                }
            },

            fnPageChange(n) {

                this.page = n;
                this.queryArticle();

            },
            queryArticle: function () {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../walleArticles/",
                    // data: {
                    //     _id: _id
                    // },
                    data: _self.articleSearchForm,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {

                            var dat = response.dat;
                            _self.articleList = dat.records;
                            _self.total = dat.total;
                        }

                    }
                });
            },

            jsTreeInit(data) {

                var _self = this;
                if (data.length == 0) {

                    var rootCate = {
                        "id": "root", "parent": "#", "text": "/",
                        state: { opened: true }, order: 3
                    };
                    data = [rootCate];
                    _self.fnAddCate(rootCate)
                }

                $('#jstree').jstree({
                    "sort": function (a, b) {

                        return this.get_node(a).original.order > this.get_node(b).original.order ? 1 : -1;

                    },
                    'core': {
                        "animation": 0,
                        "check_callback": true,
                        // "check_callback": function (operation, node, parent, position, more) {

                        //     if (operation == 'create_node') {

                        //         console.log('create_node')
                        //         console.log(node);
                        //         // _self.fnAddCate(node);
                        //     }
                        //     if (operation == 'delete_node') {

                        //         console.log('delete_node')
                        //         console.log(node);
                        //     }
                        //     if (operation == 'rename_node') {

                        //         // console.log('rename_node')
                        //         node.text = position;
                        //         // console.log(node);
                        //         _self.fnAddCate(node);
                        //         _self.queryCate();
                        //     }

                        //     // node.id = node.text;
                        //     return true;

                        // },
                        "multiple": false,
                        'data': data,

                        // [
                        //     { "id": "root", "parent": "#", "text": "/", state: { opened: true }, order: 3 },
                        //     { "id": "id1", "parent": "root", "text": "id1", state: { opened: true }, order: 5 },
                        //     { "id": "id2", "parent": "root", "text": "id2", state: { opened: true }, order: 6 },
                        // ]
                    },
                    // 'types': {                         //这里就是图片的显示格式
                    //     "default": {
                    //         "icon": "glyphicon glyphicon-list icon-lg"
                    //     },
                    //     "file": {
                    //         "icon": "fa fa-file tree-item-icon-color icon-lg"
                    //     }
                    // },

                    "plugins": [
                        "contextmenu", "dnd", "search",
                        "state", "types", "wholerow", "sort", "unique"
                    ]
                });



                $('#jstree').on("changed.jstree", function (e, data) {
                    // console.log(e);
                    // console.dir(data.node);

                    if (data.node) {

                        // console.log(data.node.original)

                        _self.articleSearchForm.cateName = data.node.text;
                        _self.articleSearchForm.cateId = data.node.id;

                        _self.queryArticle();
                    }

                    // var ref = $("#jstree").jstree(true);
                    // var sel = ref.get_selected();
                    // console.log(sel);

                });

                //拖动
                $('#jstree').on("move_node.jstree", function (e, data) {
                    // console.log(e);
                    // console.dir(data.node);

                    _self.fnUpdateCate(data.node);


                });

                //新增
                $('#jstree').on("create_node.jstree", function (e, data) {
                    // console.log(e);
                    // console.dir(data.node);

                    _self.fnAddCate(data.node);


                });

                //修改
                $('#jstree').on("rename_node.jstree", function (e, data) {
                    // console.log(e);
                    // console.dir(data.node);

                    _self.fnUpdateCate(data.node);


                });


                //删除
                $('#jstree').on("delete_node.jstree", function (e, data) {
                    // console.log(e);
                    // console.dir(data.node);

                    _self.fnDeleteCate(data.node);


                });

            }
        },
        mounted: function () {

            var _self = this;
            $('#summernote1').summernote({
                // airMode: true,
                lang: 'zh-CN',
                // placeholder: placeholder,
                minHeight: 300,
                dialogsFade: true, // Add fade effect on dialogs
                dialogsInBody: true, // Dialogs can be placed in body, not in
                // summernote.
                // disableDragAndDrop: false,// default false You can disable drag
                // and drop


            });




            this.queryCate();
            this.queryArticle();

            // $('#summernote1').summernote('disable');
        }
    })
</script>